<template>
  <div>
    <Header></Header>

    <div class="mblog">
    <div class="title">
      <h2> {{ blog.title }}</h2>

      <div v-if="ownBlog">
        <el-link icon="el-icon-edit">
          <router-link :to="{ name: 'BlogEdit', params: { blogId: blog.id } }">
            编辑
          </router-link>
        </el-link>

        <el-divider direction="vertical"></el-divider>

        <el-link type="danger" @click="delete1(blog)">
          删除
        </el-link>
      </div>
    </div>

      <el-divider></el-divider>

      <div class="markdown-body" v-html="blog.content"></div>

    </div>

<Footer></Footer>
  </div>
</template>

<script>
import 'github-markdown-css'
import Header from "../components/Header";
import Footer from "../components/Footer";

export default {
  name: "BlogDetail.vue",
  components: { Header,Footer },
  data() {
    return {
      blog: {
        id: "",
        title: "",
        content: ""
      },
      ownBlog: false
    }
  },
  created() {
    const blogId = this.$route.params.blogId
    console.log(blogId)
    const _this = this
    this.$axios.get('/blog/' + blogId).then(res => {
      const blog = res.data.data
      _this.blog.id = blog.id
      _this.blog.title = blog.title

      var MardownIt = require("markdown-it")
      var md = new MardownIt()

      var result = md.render(blog.content)
      _this.blog.content = result
      _this.ownBlog = (blog.userId === _this.$store.getters.getUser.id)

    })
  },
  methods: {
    delete1(blog) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const _this = this
        const blogid = blog.id
        _this.$axios.post("/blog/delete/" + blogid, {
          headers: {
            "Authorization": localStorage.getItem("token")
          }
        }).then(res => {
          console.log(res)
          const code = res.data.code
          if (code === 200) {
            this.centerDialogVisible = false
            _this.$router.push("/blogs")

          } else {
            this.$alert('删除失败！', '提示', {
              confirmButtonText: '确定',
            });
          }
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });


    }
  }
}
</script>

<style scoped>
.title {
   text-align: center;
}
.mblog {
  max-width: 960px;
  margin: 10px auto;
  box-shadow: 0 5px 14px 0 rgba(0, 0, 0, 0.7);
  width: 100%;
  min-height: 700px;
  padding: 20px 15px;
}
</style>